<html>

<head>
    <title>form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="../../components/element-ui/2.12.0/theme-chalk/index.css">
    <style>
    </style>
</head>
<body>

<div id="app">

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">

            <el-select v-model="form.select.value" placeholder="请选择活动区域">
                <el-option
                        v-for="item in form.select.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                </el-option>
            </el-select>

        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                style="width: 100%;" ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="时间范围">
            <el-date-picker
                    v-model="form.date3"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="时间">
        <el-date-picker
                v-model="form.date4"
                type="datetime"
                placeholder="选择日期时间">
        </el-date-picker>

        </el-form-item>
        <el-form-item label="有效时间">
            <el-time-select
                    placeholder="起始时间"
                    v-model="form.startTime"
                    :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
            </el-time-select>
            <el-time-select
                    placeholder="结束时间"
                    v-model="form.endTime"
                    :picker-options="{ start: '08:30',step: '00:15', end: '18:30', minTime: startTime }">
            </el-time-select>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="数量">
            <el-input-number v-model="form.num" size="small" @change="handleChange" :min="1" :max="10"
                             label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="级联选择">
            <el-cascader
                    v-model="form.cascader.value"
                    :options="form.cascader.options"
                    @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="付费">
            <el-switch
                    style="display: block"
                    v-model="form.pay"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="按月付费"
                    inactive-text="按年付费">
            </el-switch>
        </el-form-item>
        <el-form-item label="滑块">
            <el-slider v-model="form.slider"></el-slider>
        </el-form-item>
        <el-form-item label="穿梭">
        <el-transfer
                filterable
                :filter-method="filterMethod"
                filter-placeholder="请输入城市拼音"
                v-model="form.transfer.vaule"
                :data="form.transfer.data">
        </el-transfer>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>

<!--引入vue -->
<script src="../../components/vue/2.6.10/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../components/element-ui/2.12.0/index.js"></script>

<script type="text/javascript">
    const generateData = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
            data.push({
                label: city,
                key: index,
                pinyin: pinyin[index]
            });
        });
        return data;
    };


    new Vue({
        el: "#app",
        data: {
            form: {
                name: '',
                select: {
                    value: 'beijing',
                    options: [{label: '北京', value: 'beijing'}, {label: '上海', value: 'shanghai'}, {
                        label: '广州',
                        value: 'guangzhou',
                        disabled: true
                    }, {label: '深圳', value: 'shenzhen'}]
                },
                cascader: {
                    value: 'beijing',
                    options: [{label: '北京', value: 'beijing'}, {label: '上海', value: 'shanghai'}, {
                        label: '广州',
                        value: 'guangzhou',
                        disabled: true
                    }, {
                        label: '深圳', value: 'shenzhen',
                        children: [{
                            value: 'luohu',
                            label: '罗湖区',
                            children: [{
                                value: 'yi',
                                label: '街道一'
                            }, {
                                value: 'er',
                                label: '街道er'
                            }]
                        }, {
                            value: 'nnanshan',
                            label: '南山区',
                            children: [{
                                value: 'yi',
                                label: '街道一'
                            }, {
                                value: 'er',
                                label: '街道er'
                            }]
                        }]
                    }]
                },
                date1: '',
                date2: '',
                date3: '',
                date4: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                num: 1,
                pay: true,
                slider: 20,
                startTime: '',
                endTime: '',
                transfer:{value:[],data:generateData()}
            }
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            filterMethod(query, item) {
                return item.pinyin.indexOf(query) > -1;
            },
            onSubmit() {
                console.log('submit!');
            }
        }

    });

</script>

</body>

</html>
